<template>
	<div class="edu_edit">
		<div class="title">
			<div class="ico"></div>
			<span>自我描述</span>
		</div>
		<div class="end">
			<textarea type="text" class="about" placeholder="重点描述获得荣誉中,你所得到的收获....."  maxlength='300' v-model='all.about'>
			</textarea>
		</div>
		<div class="but">
			<div @click="Sub()">确认</div>
			<div @click="showWay([0,5])">取消</div>
		</div>
	</div>
</template>

<script>
import {mapState,mapMutations,mapGetters} from 'vuex'
export default{
	name: 'education',
	data(){
		return {
			all:{
				about:''
			},
		}
	},
	computed:{
		...mapState(['show'])
	},
	methods:{
		...mapGetters(['getEdu']),
		...mapMutations(['updateEdu','showWay']),
		// 提交、取消方法
		Sub(){
			let data = this.all
			if(data==""){
				data = "在这里谈谈你自己吧"
			}
			let arg = this.getEdu()
			this.updateEdu([arg,data])
			this.showWay([0,5])
			this.all={
				'about':""
			}
		}
	}
}
</script>

<style scoped lang="less">
	.edu_edit{
		width: 750px;
		height: 400px;
		padding: 50px 40px;
		border-radius: 10px;
		background-color: #fff;
		z-index: 9;
		.title{
			display: flex;
			color: #000;
			line-height: 30px;
			margin-bottom: 30px;
			font-size: 16px;
			background-color: #f7f7f7;
			.ico{
				width: 6px;
				height: 25px;
				border-radius: 3px;
				margin:2.5px 8px;
				background-color: #f23;
			}
		}
		.end{
			display: block;
			width: 100%;
			margin:50px 0;
			padding:20px 0px;
			span{
				display: block;
				line-height: 30px;
				width: 70px;
				color: #666;
			}
			.about{		
				display: block;
				width: 600px;
				padding: 10px 20px;
				margin: auto;
				outline: none;
				resize: none;
				color: #222;
				height: 150px;
				line-height: 30px;
				font-family: "microsoft sans serif";
				border: 1px solid #999;
			}
		}
		.but{
			display: flex;
			justify-content: center;
			div{
				width: 35px;
				padding: 0 10px;
				line-height: 24px;
				margin: 0 10px;
				text-align: center;
				color: #33aeff;
				border-radius: 3px;
				border: 1px solid #aaa;
			}
		}
	}
</style>